<template>
  <div>
    <el-form
      ref="form"
      label-position="top"
      :model="security"
      :disabled="readonly"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            :label="$t('business.workload.run_as_non_root')"
            prop="runAsNonRoot"
          >
            <ko-data-item
              v-model="security.runAsNonRoot"
              itemType="radio"
              :radios="uiState.non_root_list"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            :label="$t('business.workload.run_as_user')"
            prop="runAsUser"
          >
            <ko-data-item
              v-model.number="security.runAsUser"
              itemType="number"
              placeholder="runAsUser"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            :label="$t('business.workload.run_as_group')"
            prop="runAsGroup"
          >
            <ko-data-item
              v-model.number="security.runAsGroup"
              itemType="number"
              placeholder="runAsGroup"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="fsGroup" prop="fsGroup">
            <ko-data-item
              v-model.number="security.fsGroup"
              itemType="number"
              placeholder="fsGroup"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <span>{{ $t("business.workload.supplemental_groups") }}</span>
          <table style="width: 100%; margin-top: 10px" class="tab-table">
            <tr
              v-for="(row, index) in security.supplementalGroups"
              :key="index"
            >
              <td width="96%">
                <ko-data-item
                  v-model="security.supplementalGroups[index]"
                  placeholder="supplementalGroups"
                  itemType="input"
                />
              </td>
              <td>
                <el-button
                  type="text"
                  style="font-size: 10px"
                  @click="handleSupplementalGroupsDelete(index)"
                >
                  {{ $t("commons.button.delete") }}
                </el-button>
              </td>
            </tr>
            <tr>
              <td align="left">
                <el-button @click="handleSupplementalGroupsAdd">
                  {{ $t("business.workload.add") }}
                </el-button>
              </td>
            </tr>
          </table>
        </el-col>
        <el-col :span="12">
          <span>Sysctls</span>
          <table style="width: 100%; margin-top: 10px" class="tab-table">
            <tr v-for="(row, index) in security.sysctls" :key="index">
              <td width="48%">
                <ko-data-item
                  v-model="row.name"
                  placeholder="e.g. key"
                  itemType="input"
                />
              </td>
              <td width="48%">
                <ko-data-item
                  v-model="row.value"
                  placeholder="e.g. value"
                  itemType="input"
                />
              </td>
              <td>
                <el-button
                  type="text"
                  style="font-size: 10px"
                  @click="handleSysctlsDelete(index)"
                >
                  {{ $t("commons.button.delete") }}
                </el-button>
              </td>
            </tr>
            <tr>
              <td align="left">
                <el-button @click="handleSysctlsAdd">
                  {{ $t("business.workload.add") }}
                  {{ $t("business.workload.dns_resolver") }}
                </el-button>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>

      <div style="margin-top: 20px">
        <span style="font-size: 16px">{{
          $t("business.workload.seLinuxOptions")
        }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="level" prop="seLinuxOptions.level">
            <ko-data-item
              v-model="security.seLinuxOptions.level"
              itemType="input"
              placeholder="level"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="role" prop="seLinuxOptions.role">
            <ko-data-item
              v-model="security.seLinuxOptions.role"
              itemType="input"
              placeholder="role"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="type" prop="seLinuxOptions.type">
            <ko-data-item
              v-model="security.seLinuxOptions.type"
              itemType="input"
              placeholder="type"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="user" prop="seLinuxOptions.user">
            <ko-data-item
              v-model="security.seLinuxOptions.user"
              itemType="input"
              placeholder="user"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { PodSecurityContext } from "@/views/domain/kubeHud/api/k8s";
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

type Prop = {
  readonly?: boolean;
};
defineProps<Prop>();
const security = defineModel<PodSecurityContext>("podSecurity", {
  default: {
    seLinuxOptions: {}
  }
});

const uiState = reactive({
  non_root_list: [
    { label: t("business.workload.no"), value: false },
    { label: t("business.workload.non_root"), value: true }
  ]
});

const handleSupplementalGroupsDelete = (index: number) => {
  security.value.supplementalGroups.splice(index, 1);
};

const handleSupplementalGroupsAdd = () => {
  security.value.supplementalGroups.push(0);
};

const handleSysctlsDelete = (index: number) => {
  security.value.sysctls.splice(index, 1);
};

const handleSysctlsAdd = () => {
  security.value.sysctls.push({ name: "", value: "" });
};
</script>
